<template>
  <div class="rank-container">
      <b-container class="bv-example-row">
        <b-row>
          <b-col cols="12" sm="12" md="4" lg="4" >
            <b-card-group deck>
              <b-card no-body header="电视剧热播榜">
                <b-list-group flush>
                  <b-list-group-item href="#" class="flex-column align-items-start" v-for="(item, i) in tvList" :key="i">
                    <div class="d-flex w-100 justify-content-between">
                      <h4 class="mb-1 tv-color">{{ i+1 }} {{ item.tvName }}</h4>
                      <small class="text-muted">
                        <b-badge pill variant="primary">{{ item.tvCount }}</b-badge>
                      </small>
                    </div>
                    <small>{{ item.tvIntro }}</small>
                  </b-list-group-item>
                </b-list-group>
              </b-card>
            </b-card-group>
          </b-col>
          <b-col cols="12" sm="12" md="4" lg="4" >
            <b-card-group deck>
              <b-card no-body header="综艺热播榜">
                <b-list-group flush>
                  <b-list-group-item href="#" class="flex-column align-items-start" v-for="(item, i) in varietyList" :key="i">
                    <div class="d-flex w-100 justify-content-between">
                      <h4 class="mb-1 v-color">{{ i+1 }} {{ item.vName }}</h4>
                      <small class="text-muted">
                        <b-badge pill variant="primary">{{ item.vCount }}</b-badge>
                      </small>
                    </div>
                    <small>{{ item.vIntro }}</small>
                  </b-list-group-item>
                </b-list-group>
              </b-card>
            </b-card-group>
          </b-col>
          <b-col cols="12" sm="12" md="4" lg="4" >
            <b-card-group deck>
              <b-card no-body header="电影热播榜">
                <b-list-group flush>
                  <b-list-group-item href="#" class="flex-column align-items-start" v-for="(item, i) in movieList" :key="i">
                    <div class="d-flex w-100 justify-content-between">
                      <h4 class="mb-1 m-color">{{ i+1 }} {{ item.mName }}</h4>
                      <small class="text-muted">
                        <b-badge pill variant="primary">{{ item.mCount }}</b-badge>
                      </small>
                    </div>
                    <small>{{ item.mIntro }}</small>
                  </b-list-group-item>
                </b-list-group>
              </b-card>
            </b-card-group>
          </b-col>
        </b-row>
      </b-container>
  </div>
</template>

<script>
export default {
  data(){
    return{
      tvList:[], // 存放电视剧数据
      varietyList:[], // 存放综艺数据
      movieList:[], // 存放电影数据
      pageSize:8,
    }
  },
  created() {
    this.getTv();
    this.getVariety();
    this.getMovie();
  },
  methods:{
    getTv(){
      this.$http.get("tv/findOrderByCount?pageSize=" +this.pageSize).then(result => {
        this.tvList = result.body.list;
      })
    },
    getVariety(){
      this.$http.get("variety/findOrderByCount?pageSize=" +this.pageSize).then(result => {
        this.varietyList = result.body.list;
      })
    },
    getMovie(){
      this.$http.get("movie/findOrderByCount?pageSize=" +this.pageSize).then(result => {
        this.movieList = result.body.list;
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.rank-container{
  margin-top: 2rem;
  .tv-color{
    color:#2d8cf0;
  }
  .v-color{
    color:#ff603c;
  }
  .m-color{
    color:#ef4238;
  }
}
</style>